<template>
  <q-dialog v-model="isShow" style="z-index: 100" persistent>
    <div class="full-width" style="font-family: PingFangSC, PingFang SC;position: relative;">
      <div class="flex justify-center">
        <div class="flex justify-center items-center" style="width: 80px; height: 80px; background-color: #FFFFFF; border-radius: 50%;">
          <img src="~/assets/images/home/code-top.png" style="width: 56px; height: 64px;" class="block" />
        </div>
      </div>
      <div class="q-px-md" style="margin-top: -35px; padding-top: 40px; border-radius: 12px; background: linear-gradient( 180deg, #DCEFFF 0%, #FFFFFF 100%);">
        <div style="color: #0A225C;text-align: center;font-weight: 600;font-size: 16px;">请输入验证码</div>
        <div class="flex justify-between items-center q-mt-sm">
          <div style="color: #666666;font-size: 12px;">验证码已发送至+86 {{ phonedesensitize }}</div>
          <div style="font-size: 13px;" @click="getCode" :style="{color: codeDisable ? '#666' : '#096AFF'}">{{ codeText }}</div>
        </div>

        <div class="q-mt-md" ref="otpInputBox">
          <VOtpInput
            ref="otpInput"
            input-classes="otp-input"
            separator=""
            inputType="number"
            inputmode="tel"
            :num-inputs="6"
            v-model:value="code"
            :should-auto-focus="true"
            :should-focus-order="true"
            @on-complete="submit"
            :placeholder="['', '', '', '']"
          />
        </div>

        <div class="line " style="margin-top: 20px; background-color: #D8D8D8;height: 1px; opacity: 0.5;"></div>
        <div @click="submit" class=" text-center" style="padding: 12px; color: #096AFF; font-weight: bold; font-size: 15px;">获取额度</div>
        <div class="close-btn">
          <img @click="close" style="width: 16px;height: 16px;" src="~/assets/images/public/close.png" alt="">
        </div>
      </div>
    </div>
  </q-dialog>
</template>

<script setup lang="ts">
import { sendSmsApi } from 'src/api/user';
import { getUrlParam } from 'src/boot/paramhandler';
import { useLoginHook } from 'src/hooks/login_hook';
import { useAppStore } from 'src/stores/app-store';
import { showLoadingToast, showToast } from 'vant';
import { computed, nextTick, ref, unref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
// import VOtpInput from "vue3-otp-input";
import VOtpInput from 'src/components/vue3-otp-input/vue3-otp-input.vue'
const router = useRouter()
const route = useRoute()

const otpInputBox = ref<HTMLDivElement>()

const isShow = ref(false);
const phone = ref('');
const code = ref('');
let interval: number

const loading = ref(false)
const codeText = ref('获取验证码');
const codeDisable = ref(false);
const codeLoading = ref(false);


const phonedesensitize = computed(() => {
  if (!phone.value) return ''
  return `${phone.value.slice(0, 3)}****${phone.value.slice(phone.value.length - 3, phone.value.length)}`
})

const show = (_phone: string) => {
  if (phone.value != _phone) {
    codeDisable.value = false;
    codeText.value = '获取验证码';
    clearInterval(interval)
    phone.value = _phone;
  }
  code.value = '';
  isShow.value = true;

  if (!codeDisable.value) {
    getCode()
  }
  nextTick(() => {
    otpInputBox.value?.querySelector('input')?.focus()
  })
};
const close = () => {
  isShow.value = false;
};

const submit = async () => {
  if (!code.value.length) {
    return showToast('请输入验证码');
  }
  loading.value = true
  const toast = showLoadingToast({
    forbidClick: true,
    duration: 0,
  });
  await useAppStore().login(phone.value, code.value).finally(() => loading.value = false);
  toast.close();

  const isJump = useLoginHook(router, route).afterLoginHandler();
};

const getCode = async () => {
  const toast = showLoadingToast({
    forbidClick: true,
    duration: 0,
  });
  codeLoading.value = true;
  await sendSmsApi({ oType: 0, mobile: phone.value }).finally(() => (codeLoading.value = false));
  toast.close();
  codeAwait(60);
};

const codeAwait = (time: number) => {
  clearInterval(interval)
  codeDisable.value = true;
  codeText.value = `${time}s`;
  interval = window.setInterval(() => {
    if (time <= 1) {
      codeDisable.value = false;
      codeText.value = '获取验证码';
      return clearInterval(interval);
    }
    codeText.value = `${--time}s`;
  }, 1000);
};

defineExpose({ show });
</script>

<style lang="scss" scoped>
.close-btn {
  position: absolute;
  right: 0;
  top: 44px;
  margin: 16px;
}
.input-box {
  border: 1px solid #ffba2f;
  border-radius: 99999px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 16px;

  input {
    outline: none;
    border: none;
    display: block;
    min-width: 0;
    flex: 1;
    background-color: transparent;
    font-size: 16px;
  }
}
</style>
